<template>
  <div class="home-reserve-vue text-center" id="reserve">
    <h1 class="title">一键预约 免费测量</h1>

    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
      <div class="row item">

        <div class="col-xs-offset-1 col-xs-2 input-field">
          <validate>
            <input class="form-control" v-model="reserveName" required name="reserveName" placeholder="姓名" />

            <field-messages name="reserveName" show="$touched || $submitted">
              <div slot="required" class="error">姓名必填</div>
            </field-messages>
          </validate>
        </div>


        <div class="col-xs-4 input-field">
          <validate>
            <input class="form-control" v-model="reservePhone" required name="reservePhone" placeholder="手机号码" cellphone-validator />

            <field-messages name="reservePhone" show="$touched || $submitted">
              <div slot="required" class="error">手机号码必填</div>
              <div slot="cellphone-validator" class="error">请输入正确的手机号</div>
            </field-messages>
          </validate>
        </div>

      </div>

      <div class="row item">
        <validate class="city-group">
            <div class="col-xs-offset-1 col-xs-2 input-field">
              <select id="province" ref="province" class="city-select form-control" name="province">
                  <option>--省份--</option>
                  <option v-for="(province, index) in allProvinces" :value="province[1]">{{province[0]}}</option>
              </select>
            </div>

            <div class="col-xs-2 input-field">
                <select id="city" ref="city" class="city-select form-control" name="reserveStreetId" v-model="reserveStreetId" required>
                    <option value="">--市--</option>
                </select>
                <field-messages name="reserveStreetId" show="$touched || $submitted">
                  <div class="error street_id_error" slot="required">城市必填</div>
                </field-messages>
            </div>

        </validate>

      </div>

      <div class="row item">
        <div class="col-xs-offset-1 col-xs-10 input-field">
          <button class="btn btn-primary btn-lg btn-block">一键预约</button>
        </div>
      </div>
    </vue-form>
  </div>
</template>

<script>
import VueForm from 'vue-form'
import CellphoneCode from './cellphoneCode.vue'
import {EventBus} from '../eventBus'
import Query from '../query'
import ErrorDialog from 'error_alert'
import SuccessDialog from 'success_alert'

var options = {
  validators: {
    'cellphone-validator': function(value, attrValue, vnode) {
      return /^\d{11}$/.test(value)
    }
  }
}

export default {
  name: "reserve",
  components: {
    'cellphoneCode': CellphoneCode
  },
  mixins: [new VueForm(options)],
  data: function data() {
    return {
      allProvinces: [],
      formstate: {},
      reserveName: '',
      reservePhone: '',
      reserveCode: '',
      reserveStreetId: '',
      reserveDetail: ''
    }
  },
  mounted() {
    var _this = this
    Query.get('/dashboard/addresses/all_province').then((data) => {
        if (data.status === 'ok') {
            _this.allProvinces = data.data
        }
    }).catch((error) => {
        ErrorDialog.show(error.message)
    })

    var vm = this
    var selects = $(this.$el).find('select');
    return selects.change(function() {
        var $this, next_selects;
        $this = $(this);
        next_selects = selects.slice(selects.index(this) + 1);
        $("option:gt(0)", next_selects).remove();
        if (next_selects.first()[0] && $this.val() && !$this.val().match(/--.*--/)) {
            return $.get("/china_city/" + $(this).val()+"?is_simple=true", function(data) {
                var i, len, option;
                if (data.data != null) {
                    data = data.data;
                }
                for (i = 0, len = data.length; i < len; i++) {
                    option = data[i];
                    next_selects.first()[0].options.add(new Option(option[0], option[1]));
                }
                return next_selects.trigger('china_city:load_data_completed');
            });
        }
    });
  },
  methods: {
    onSubmit: function(){
      var _this = this
      if (!this.formstate.$invalid) {
        let reserve = {
          survey_fee_id: 1,
          contact_name: _this.reserveName,
          address_desc: _this.reserveDetail,
          desc: '测量详情'
        }
        let user = {
          mobile: _this.reservePhone,
          sms_code: _this.reserveCode,
        }
        let address = {
          street_id: _this.reserveStreetId
        }

        Query.post('/reserves', {
          reserve: reserve,
          user: user,
          address: address
        }).then((data) => {
          console.log(data);

          if (data.flag) {
            SuccessDialog.show('预约成功！')
            window.location.replace(data.data)
          } else {
            ErrorDialog.show(err.message)
          }
        }).catch((err) => {
          ErrorDialog.show(err.message)
        })
      }
    }
  },
  watch: {
    reservePhone: function(val, oldVal) {
      EventBus.$emit('getCellphone', this.reservePhone)
    }
  }
}
</script>

<style lang="less">
.home-reserve-vue{
  height: 280px;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .title{
    margin-bottom: 25px;
  }

  .item{
    margin-bottom: 20px;

    .input-field{
      padding-right: 0;
      position: relative;

      #captcha-root{
        background-color: red;
        .input-group-btn{
          display: inline-block !important;
          width: 100% !important;
          height: 45px !important;

          .sms-code{
            height: 100% !important;
            width: 100% !important;
            margin: 0 !important;
          }
        }
      }

      .error{
        position: absolute;
        text-align: left;
        padding: 0 15px;
        bottom: -20px;
        color: #EA5C5C;
      }
    }
  }

  h1{
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
  }

  input,select{
    height: 45px;
    border: 0;
    outline: none;
    padding: 15px;
    border-radius: 0;
  }

  select {
    -webkit-appearance: none;
    border-radius: 0px;
    line-height: 1;
  }
}
</style>
